<template>
  <div id="app">
    <!-- 未登录状态显示登录页面 -->
    <Login v-if="!isLoggedIn" />
    
    <!-- 管理员页面 -->
    <AdminMainPage v-else-if="user?.role === 'ADMIN'" />
    
    <!-- 维修师傅页面 -->
    <MaintenanceMainPage v-else-if="user?.role === 'MAINTENANCE'" />
    
    <!-- 普通用户主界面 -->
    <el-container v-else class="app-container">
      <!-- 顶部导航栏 -->
      <el-header class="app-header">
        <div class="header-content">
          <div class="logo">
            <el-icon :size="28"><House /></el-icon>
            <h1>智能家居控制中心</h1>
          </div>
          <div class="header-stats">
            <el-tag type="success" size="large">
              <el-icon><Switch /></el-icon>
              {{ activeDevicesCount }} 设备运行中
            </el-tag>
            <el-dropdown @command="handleUserCommand">
              <span class="user-info">
                <el-icon><User /></el-icon>
                {{ user?.nickname || user?.username }}
                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                  <el-dropdown-item command="settings">系统设置</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      
      <!-- 主要内容区域 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside class="app-sidebar" width="250px">
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            @select="handleMenuSelect"
          >
            <el-menu-item index="dashboard">
              <el-icon><Odometer /></el-icon>
              <span>控制面板</span>
            </el-menu-item>
            <el-menu-item index="visualization">
              <el-icon><View /></el-icon>
              <span>房屋可视化</span>
            </el-menu-item>
            <el-menu-item index="devices">
              <el-icon><Grid /></el-icon>
              <span>设备管理</span>
            </el-menu-item>
            <el-menu-item index="real-devices">
              <el-icon><Connection /></el-icon>
              <span>真实设备控制</span>
            </el-menu-item>
            <el-menu-item index="scenes">
              <el-icon><Star /></el-icon>
              <span>场景模式</span>
            </el-menu-item>
            <el-menu-item index="settings">
              <el-icon><Setting /></el-icon>
              <span>系统设置</span>
            </el-menu-item>
            <el-menu-item index="service">
              <el-icon><Tools /></el-icon>
              <span>安装保修</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        
        <!-- 主内容区 -->
        <el-main class="app-main">
          <!-- 统一状态检查 -->
          <NetworkStatus 
            :error="deviceError || ''" 
            :loading="deviceLoading || false"
            @retry="loadUserDevices"
            @clear-error="clearDeviceError"
          />
          
          <!-- 控制面板 -->
          <div v-if="activeMenu === 'dashboard'" class="dashboard">
            <Dashboard :on-navigate="handleMenuSelect" />
          </div>
          
          <!-- 房屋可视化 -->
          <div v-if="activeMenu === 'visualization'">
            <HouseVisualization />
          </div>
          
          <!-- 设备管理 -->
          <div v-if="activeMenu === 'devices'">
            <DeviceManager />
          </div>
          
          <!-- 真实设备控制 -->
          <div v-if="activeMenu === 'real-devices'">
            <RealDeviceControl />
          </div>

          <!-- 智能摄像头控制 -->
          <div v-if="activeMenu === 'camera-control'">
            <SmartCameraControl />
          </div>

          <!-- 场景模式 -->
          <div v-if="activeMenu === 'scenes'">
            <SceneMode />
          </div>
          
          <!-- 个人资料 -->
          <div v-if="activeMenu === 'profile'" class="profile">
            <Profile />
          </div>
          
          <!-- 系统设置 -->
          <div v-if="activeMenu === 'settings'" class="settings">
            <Settings />
          </div>
          
          <!-- 安装保修 -->
          <div v-if="activeMenu === 'service'" class="service">
            <ServiceRequest />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
// eslint-disable-next-line no-unused-vars
import { House, Switch, Odometer, View, Grid, Star, Setting, User, ArrowDown, Connection, VideoPlay, Tools } from '@element-plus/icons-vue'
import { useAuthStore } from './store/authStore.js'
import { useDeviceStore } from './store/deviceStore.js'
import Login from './components/Login.vue'
import NetworkStatus from './components/NetworkStatus.vue'
import Dashboard from './components/Dashboard.vue'
import HouseVisualization from './components/HouseVisualization.vue'
import DeviceManager from './components/DeviceManager.vue'
import RealDeviceControl from './components/RealDeviceControl.vue'
import SmartCameraControl from './components/SmartCameraControl.vue'
import SceneMode from './components/SceneMode.vue'
import Settings from './components/Settings.vue'
import Profile from './components/Profile.vue'
import ServiceRequest from './components/ServiceRequest.vue'
import AdminMainPage from './components/AdminMainPage.vue'
import MaintenanceMainPage from './components/MaintenanceMainPage.vue'

export default {
  name: 'App',
  components: {
    Login,
    NetworkStatus,
    Dashboard,
    HouseVisualization,
    DeviceManager,
    RealDeviceControl,
    SmartCameraControl,
    SceneMode,
    Settings,
    Profile,
    ServiceRequest,
    AdminMainPage,
    MaintenanceMainPage
  },
  setup() {
    const authStore = useAuthStore()
    const deviceStore = useDeviceStore()
    const activeMenu = ref('dashboard')
    
    const activeDevicesCount = computed(() => deviceStore.activeDevicesCount.value)
    
    // 解构deviceStore的属性以避免模板中的访问错误
    const { error: deviceError, loading: deviceLoading, loadUserDevices } = deviceStore
    
    const handleMenuSelect = (index) => {
      activeMenu.value = index
    }
    
    const handleLogout = () => {
      authStore.logout()
    }
    
    const handleUserCommand = (command) => {
      switch (command) {
        case 'profile':
          // 跳转到个人资料页面
          activeMenu.value = 'profile'
          break
        case 'settings':
          activeMenu.value = 'settings'
          break
        case 'logout':
          handleLogout()
          break
      }
    }
    
    const clearDeviceError = () => {
      deviceStore.clearError()
    }
    
    // 处理登录成功事件
    const handleLoginSuccess = (event) => {
      const { redirectPage, userRole, roleDescription } = event.detail
      console.log('收到登录成功事件，跳转页面:', redirectPage)
      console.log('用户角色:', userRole, '角色描述:', roleDescription)
      if (redirectPage) {
        activeMenu.value = redirectPage
      }
    }
    
    // 组件挂载时检查登录状态
    onMounted(() => {
      if (authStore.checkAuth()) {
        // 如果已登录，加载用户设备
        deviceStore.loadUserDevices()
      } else {
        console.log('需要手动登录')
      }
      
      // 监听登录成功事件
      window.addEventListener('login-success', handleLoginSuccess)
    })
    
    return {
      activeMenu,
      activeDevicesCount,
      handleMenuSelect,
      handleLogout,
      handleUserCommand,
      clearDeviceError,
      handleLoginSuccess,
      isLoggedIn: authStore.isLoggedIn,
      user: authStore.user,
      deviceError,
      deviceLoading,
      loadUserDevices
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  background: #f5f7fa;
}

.app-container {
  height: 100vh;
}

.app-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 30px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.header-stats {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.user-info:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.app-sidebar {
  background: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.sidebar-menu {
  border-right: none;
  height: 100%;
}

.sidebar-menu .el-menu-item {
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  font-weight: 500;
}

.sidebar-menu .el-menu-item:hover {
  background-color: #f0f8ff;
  color: #409eff;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: #e6f3ff;
  color: #409eff;
  border-right: 3px solid #409eff;
}

.app-main {
  padding: 0;
  background: #f5f7fa;
  overflow-y: auto;
}

.dashboard,
.settings {
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-sidebar {
    width: 200px !important;
  }
  
  .header-content {
    padding: 0 15px;
  }
  
  .logo h1 {
    font-size: 20px;
  }
  
  .header-stats {
    display: none;
  }
}

@media (max-width: 480px) {
  .app-sidebar {
    width: 60px !important;
  }
  
  .sidebar-menu .el-menu-item span {
    display: none;
  }
  
  .logo h1 {
    display: none;
  }
}
</style>
